<template>
  <div class="page-instore-mana">
    <el-form :inline="true" :model="instoreForm" ref="instoreForm">
      <div class="pc-page-header">
        <el-form-item prop="instoreNo">
          <el-input v-model="instoreForm.instoreNo"  clearable class="pc-input3-col5" placeholder="输入入库编号"></el-input>
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="instoreForm.status" multiple  collapse-tags class="pc-input3-col6" placeholder="选择入库状态" value="">
            <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="instoreTime" style="margin-left: -5px">
          <el-date-picker class="block"
                          v-model="instoreForm.instoreTime"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="选择入库开始日期"
                          end-placeholder="选择入库结束日期"
                          value-format="yyyy-MM-dd"
                          @change="getDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isshowMore" prop="storageName">
          <el-input v-model="instoreForm.storageName"  clearable class="pc-input3-col5" placeholder="输入入库仓库"></el-input>
        </el-form-item>
        <el-form-item v-if="isshowMore&&(roleType===2||roleType===1)" prop="ownerName">
            <el-input v-model="instoreForm.ownerName"  clearable  class="pc-input3-col5" placeholder="输入存货人"></el-input>
        </el-form-item>
        <el-form-item v-if="isshowMore&&(roleType===2||roleType===1)" prop="resource">
          <el-select v-model="instoreForm.resource" clearable filterable placeholder="选择来源" class="pc-input3-col5" value="">
            <el-option v-for="item in originOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('instoreForm', true)">刷新</el-button>
        </el-form-item>
        <el-form-item label="">
        <el-button v-permission="['wms:instore:add']" size="small" type="primary" @click="openAddDialog">入库录单</el-button>
        <el-button style="margin-left: 0px" v-permission="['wms:instore:addOwner']" size="small" type="primary"  @click="openAddOwnerDialog">新建指令</el-button>
        <el-button @click="showMore()">{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>

    <egrid v-if="this.roleType===2" border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>
    <egrid v-else-if="this.roleType===3" border class="page-list"
           :data="tableData"
           :columns="columnsOwner"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>
    <egrid v-else-if="this.roleType===1" border class="page-list"
           :data="tableData"
           :columns="columnsAdmin"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps"
           :columns-handler="columnsHandler">
    </egrid>

    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryInstoreList"  :queryData="instoreForm" @on-query="queryCallBackFn">
      </pc-pagination>
    </div>

    <!--<el-button-->
      <!--plain-->
      <!--@click="openMessage">-->
      <!--测试消息提示-->
    <!--</el-button>-->
    <pc-dialog :is-show="isShowAddDialog"   title ='入库录单' @on-close="isShowAddDialog = false">
      <div>
        <instore-add :roleType=2 @closeRefresh="closeRefresh">
        </instore-add>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="this.isAdditionalInformation"  title ='补充资料' @on-close="isAdditionalInformation = false">
      <div>
        <instore-add :roleType=2 :detailId="this.detailId" @closeRefresh="closeRefresh" :isAdditionalInformation = this.isAdditionalInformation>
        </instore-add>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="isShowAddOwnerDialog" title ='新建指令' @on-close="isShowAddOwnerDialog = false">
      <div>
        <instore-add-owner @closeRefresh="closeRefresh" :roleType=3>
        </instore-add-owner>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="isShowDetailDialog" v-if="this.statusType===2"  title ='确认入库' @on-close="isShowDetailDialog = false">
      <div>
        <detail :roleType="this.roleType" @closeRefresh="closeRefresh" :version ='this.version' :detailId="this.detailId" :statusType="this.statusType">
      </detail>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="isShowDetailDialog" v-if="this.statusType===3 || this.statusType===4"  title ='入库录单详情' @on-close="isShowDetailDialog = false">
      <div>
        <detail :roleType="this.roleType" @closeRefresh="closeRefresh" :version ='this.version' :detailId="this.detailId" :statusType="this.statusType">
        </detail>
      </div>
    </pc-dialog>
    <pc-dialog :is-show="isShowDetailOwnerDialog"  title ='入库指令详情' @on-close="isShowDetailOwnerDialog = false">
        <detail :roleType="this.roleType" :detailId="this.detailId" :statusType="this.statusType">
        </detail>
    </pc-dialog>
  </div>
</template>

<script>
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import InstoreAdd from './instoreAdd/index.vue';
  import InstoreAddOwner from './instoreAddOwner/index.vue';
  import EgridCellView from 'components/wms/comm/EgridCellView';
  import Detail from './instoreAdd/detail.vue';
  import { Notification } from 'element-ui';

  let that;
  // 操作按钮
  var Btn = {
    template:
      `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button  type="danger" v-if="showHandle===1&&hasPermission('wms:instore:edit')" plain @click="toEditFn(row)">补充资料</el-button>
        <el-button  type="danger" v-if="showHandle===2&&hasPermission('wms:instore:sure')" plain @click="viewdetail(row)">确认入库</el-button>
        <el-button v-if="(showHandle===1||showHandle===2)&&hasPermission('wms:instore:cancel')" type="info" plain @click="cancelInstoreFn(row)">取消</el-button>
        <el-button v-if="(showHandle===3||showHandle===4)&&hasPermission('wms:instore:detail')" type="primary"  plain @click="viewdetail(row)">详情</el-button>
      </div>`,
    props: ['row'],
    computed: {
      showHandle() {
        return this.row.status;
      }
    },
    methods: {
      toEditFn (val) {
        this.$emit('handle-order', val);
      },
      cancelInstoreFn (val) {
        this.$emit('cancel-order', val);
      },
      viewdetail(val) {
        this.$emit('order-detail', val);
      }
    }
  };
  var BtnOwner = {
    template:
      `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button type="danger" plain v-permission="['wms:instore:detail']" @click="viewdetail(row)">详情</el-button>
        <el-button v-if="(showHandle===1||showHandle===2)&&hasPermission('wms:instore:cancel')" type="info" plain @click="cancelInstoreFn(row)">取消</el-button>
      </div>`,
    props: ['row'],
    computed: {
      showHandle() {
        return this.row.status;
      }
    },
    methods: {
      cancelInstoreFn (val) {
        this.$emit('cancel-order', val);
      },
      viewdetail(val) {
        this.$emit('order-detail', val);
      }
    }
  };
  var BtnAdmin = {
    template:
      `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button v-if="(showHandle===3||showHandle===4)&&hasPermission('wms:instore:detail')" type="primary"  plain @click="viewdetail(row)">详情</el-button>
      </div>`,
    props: ['row'],
    computed: {
      showHandle() {
        return this.row.status;
      }
    },
    methods: {
      viewdetail(val) {
        this.$emit('order-detail', val);
      }
    }
  };
  export default {
    data () {
      return {
        statusType: 0, // 1待补充资料 2待入库 已入库 4已取消
        detailId: 0,
        version: 0, // 版本号
        isshowMore: false,
        isShowAddDialog: false,
        isShowDetailDialog: false,
        isShowDetailOwnerDialog: false,
        isAdditionalInformation: false, // 是否是补充资料进入编辑
        isShowAddOwnerDialog: false,
        showMoreText: '更多',
        roleType: 0, // 1超级管理员 2云仓 3 货主企业
        instoreForm: {
          status: [],
          instoreNo: '',
          instoreTime: null,
          storageName: '',
          ownerName: '',
          resource: '',
          startDate: null,
          endDate: null
        },
        tableData: [],
        columns: [
          {
            label: '入库编号',
            prop: 'instoreNo'
          },
          {
            label: '入库状态',
            prop: 'statusName'
          },
          {
            label: '入库日期',
            prop: 'instoreTime'
          },
          {
            label: '存货人',
            prop: 'ownerName'
          },
          {
            label: '入库仓库',
            prop: 'storageName'
          },
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '来源',
            prop: 'resourceName'
          },
          {
            label: '操作',
            minWidth: 202,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'handle-order' (data) {
                that.toEditFn(data);
              },
              'cancel-order' (data) {
                that.cancelInstoreFn(data);
              },
              'order-detail' (data) {
                that.viewDetailFn(data);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsOwner: [
          {
            label: '入库编号',
            prop: 'instoreNo'
          },
          {
            label: '入库状态',
            prop: 'statusName'
          },
          {
            label: '入库日期',
            prop: 'instoreTime'
          },
          {
            label: '入库仓库',
            prop: 'storageName'
          },
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '操作',
            minWidth: 202,
            fixed: 'right',
            component: BtnOwner, // 'el-button'
            listeners: {
              'cancel-order' (data) {
                that.cancelInstoreFn(data);
              },
              'order-detail' (data) {
                that.viewDetailFn(data);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsAdmin: [
          {
            label: '入库编号',
            prop: 'instoreNo'
          },
          {
            label: '入库状态',
            prop: 'statusName'
          },
          {
            label: '入库日期',
            prop: 'instoreTime'
          },
          {
            label: '存货人',
            prop: 'ownerName'
          },
          {
            label: '入库仓库',
            prop: 'storageName'
          },
          {
            label: '货物名称',
            prop: 'goodsName'
          },
          {
            label: '来源',
            prop: 'resourceName'
          },
          {
            label: '操作',
            minWidth: 202,
            fixed: 'right',
            component: BtnAdmin, // 'el-button'
            listeners: {
              'order-detail' (data) {
                that.viewDetailFn(data);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsSchema: {
          '入库日期': {
            minWidth: 180,
            component: EgridCellView
          },
          '入库仓库': {
            minWidth: 240,
            component: EgridCellView
          },
          '货物名称': {
            minWidth: 240,
            component: EgridCellView
          },
          '来源': {
            minWidth: 240,
            component: EgridCellView
          }
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 150,
          showOverflowTooltip: true
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        columnsHandler (cols) {
        },
        statusOption: [{
          value: '1',
          label: '待补充资料'
        }, {
          value: '2',
          label: '待入库'
        },
        {
          value: '3',
          label: '已入库'
        },
        {
          value: '4',
          label: '已取消'
        }],
        originOption: [{
          value: '1',
          label: '找库订单'
        }, {
          value: '2',
          label: '移动端指令'
        },
        {
          value: '3',
          label: '入库录单'
        },
        {
          value: '4',
          label: 'PC端指令'
        }],
        emptyText: '',
        pageUrl: {
          // url  /instore/listInstore
          queryInstoreList: '/maliwms/instore/listInstore'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, InstoreAdd, InstoreAddOwner, Notification, Detail, EgridCellView
    },
    created () {
      this.roleType = parseInt(this.$store.getters.getRoleId);
      that = this;
    },
    methods: {
      closeRefresh() {
        this.successTip('提交成功');
        this.isShowAddDialog = false;
        this.isShowAddOwnerDialog = false;
        this.isAdditionalInformation = false;
        this.isShowAddOwnerDialog = false;
        this.isShowDetailDialog = false;
        this.isShowDetailOwnerDialog = false;
        this.refresh('instoreForm', false);
      },
      getDate() {
        if (this.instoreForm.instoreTime === null) {
          this.instoreForm.startDate = '';
          this.instoreForm.endDate = '';
        } else {
          this.instoreForm.startDate = this.instoreForm.instoreTime[0];
          this.instoreForm.endDate = this.instoreForm.instoreTime[1];
        }
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      // openMessage() {
      //   this.$notify.info({
      //     title: '自定义位置',
      //     message: '右下角弹出的消息',
      //     position: 'bottom-right'
      //   });
      // },
      showMore () {
        this.isshowMore = !this.isshowMore;
        if (this.isshowMore) {
          this.showMoreText = '收起';
        } else {
          this.showMoreText = '更多';
        }
      },
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      queryDataFn (isRefresh) {
        this.$refs.pcPagination.queryListWithPageFn(isRefresh);
      },
      refresh (formName, isRefresh) {
        this.$refs[formName].resetFields();
        this.instoreForm.startDate = '';
        this.instoreForm.endDate = '';
        this.queryDataFn(isRefresh);
      },
      cancelInstoreFn (scopeRow) {
        this.$pcMessageBox.prompt(null, '取消理由', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: null,
          inputErrorMessage: '',
          inputPlaceholder: '请输入取消理由',
          inputValidator: (val) => {
            if (!val || val === '') {
              return '请输入取消理由';
            }
            if (val.length > 200) {
              return '输入长度不能大于200';
            }
          }
        }).then(({ value }) => {
          this.ajax({
            type: 'POST',
            url: '/maliwms/instore/cancelInstore',
            data: {id: scopeRow.id, cancelReason: value, version: scopeRow.version},
            loading: true,
            success: (res) => {
              setTimeout(() => {
                this.$pcNProgress.done();
              }, 300);
              if (res.code === 200) {
                this.successTip('提交成功');
              } else {
                this.errorTip(res.message);
              }
              this.refresh('instoreForm', false);
            }
          });
        }).catch(() => {
        });
      },
      viewDetailFn (scopeRow) {
        this.version = scopeRow.version;
        this.detailId = scopeRow.id;
        this.statusType = scopeRow.status;
        if (this.roleType === 2) {
          this.isShowDetailDialog = true;
        } else {
          this.isShowDetailOwnerDialog = true;
        }
        this.isShowAddDialog = false;
        this.isShowAddOwnerDialog = false;
      },
      toEditFn (scopeRow) {
        this.detailId = scopeRow.id;
        this.isAdditionalInformation = true;
        this.isShowAddDialog = false;
        this.isShowDetailDialog = false;
        this.isShowDetailOwnerDialog = false;
        this.isShowAddOwnerDialog = false;
      },
      openAddDialog() {
        this.isAdditionalInformation = false;
        this.isShowAddDialog = true;
        this.isShowDetailDialog = false;
        this.isShowDetailOwnerDialog = false;
        this.isShowAddOwnerDialog = false;
      },
      openAddOwnerDialog() {
        this.isShowDetailDialog = false;
        this.isShowAddOwnerDialog = true;
        this.isShowDetailOwnerDialog = false;
        this.isShowAddDialog = false;
      }
    }
  };
</script>
<style>
.page-instore-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail{
  width: 146px;
  height: 146px;
  display: block;
  position:relative;
}
.page-instore-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail:before{
  content: "\E614";
  position: absolute;
  top: 18px;
  left: 40px;
  color: #b3b3b3;
  font-size: 60px;
  font-family: "maliiconfont" !important;
}
.page-instore-mana .topClass .el-upload-list__item-delete .el-icon-delete {
  display: none;
}
.page-instore-mana .topClass .el-upload--picture-card
{
  display: none;
}
.page-instore-mana .topClass .el-upload-list--picture-card .el-upload-list__item .el-icon-close
{
  display: none;
}
.page-instore-mana .topClass .el-upload-list--picture-card .el-upload-list__item .el-icon-close-tip
{
  display: none;
}
.page-instore-mana .page-instore .el-upload-list--picture-card .el-upload-list__item .el-icon-close
{
  display: none;
}
.page-instore-mana .page-instore .el-upload-list--picture-card .el-upload-list__item .el-icon-close-tip
{
  display: none;
}
</style>
